<template>
  <div id="home">
    <div class="page-card">
      <div class="page-header">
        <div class="page-title">最新公告</div>
        <div class="more-btn" @click="toNoticeList">查看更多</div>
      </div>
      <div class="page-content">
        <div class="list">
          <div class="list-cell" v-for="(item,index) in noticeList" :key="index" v-if="index < 3"
               @click="toNoticeDetail(item.id)">
            <div>{{item.title}}</div>
            <div>{{item.create_time}}</div>
          </div>
          <div class="no-data-img" v-if="noticeList.length == 0">
            <img src="../../assets/image/no-data.png" alt="">
            <div class="tips">暂无数据</div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-card">
      <div class="page-header">
        <div class="page-title">任务<span>(单击矩形可管理任务)</span></div>
      </div>
      <div class="page-content">
        <div class="task" id="taskSales"></div>
        <div class="task" id="taskFlow"></div>
      </div>
      <!--<div class="page-content">
        <el-table class="statistics-table"  :data="waitPushTaskNum" border size="mini">
          <el-table-column prop="wait_sale_num" label="销量等待执行">
            <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(3)">{{scope.row.wait_sale_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_get_sale_num" label="销量已派单">
             <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(4)">{{scope.row.wait_get_sale_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_real_sale_num" label="销量正在执行">
             <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(5)">{{scope.row.wait_real_sale_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_check_sale_num" label="销量待审核">
             <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(0)">{{scope.row.wait_check_sale_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_check_assess_num" label="销量评价待审核">
             <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(2)">{{scope.row.wait_check_assess_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_flow_num" label="流量等待执行">
            <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(6)">{{scope.row.wait_flow_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_get_flow_num" label="流量已派单">
            <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(7)">{{scope.row.wait_get_flow_num}}</div>
          </el-table-column>
          <el-table-column prop="wait_real_flow_num" label="流量正在执行">
            <div style="cursor: pointer;" slot-scope="scope" @click="jumpTaskList(8)">{{scope.row.wait_real_flow_num}}</div>
          </el-table-column>
           <el-table-column prop="wait_check_flow_num" label="流量待审核">
             <div style="cursor: pointer; color: red;" slot-scope="scope" @click="jumpTaskList(1)">{{scope.row.wait_check_flow_num}}</div>
           </el-table-column>
        </el-table>
      </div>-->
    </div>
    <el-dialog title="公告" :visible.sync="isShowDialog" width="500px">
      <div class="display-notice" v-for="(item, index) in newNoticeList" :key="index" v-if="index < 3">
        <router-link :to="{name:'noticeDetail',query:{id:item.id}}">
          <div class="display-notice-time">{{item.create_time}}</div>
          <div class="display-notice-title">{{item.title}}</div>
        </router-link>
      </div>
    </el-dialog>
    <el-dialog title="公 告" :visible.sync="dialogTab" center :append-to-body="true" :lock-scroll="false" width="30%">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item :title="notice.create_time+' '+notice.title" v-if="index == 0" name="1"
                          v-for="(notice,index) in noticeList" :key=index>
          <div>{{notice.content}}</div>
        </el-collapse-item>
        <el-collapse-item :title="notice.create_time+' '+notice.title" v-if="index != 0"
                          v-for="(notice,index) in noticeList" :key=index>
          <div>{{notice.content}}</div>
        </el-collapse-item>
      </el-collapse>
    </el-dialog>

  </div>

</template>
<script>
import {apiMerchantIndex} from '../../request/api'
import {mapGetters, mapActions} from 'vuex';

export default {
  data() {
    return {
      noticeList: [],
      newNoticeList: [],
      waitPushTaskNum: [],
      isShowDialog: false,
      dialogTab: false,
      activeName: '1',
      pageRouter: {
        0: '/salesManage/waitCheckOrder',
        1: '/flowManage/waitCheckOrder',
        2: '/assessManage/addToAssessOrder',
        3: '/salesManage/waitingOrder',
        4: '/salesManage/waitReceiveOrder',
        5: '/salesManage/beingExecutedOrder',
        6: '/flowManage/waitingOrder',
        7: '/flowManage/waitReceiveOrder',
        8: '/flowManage/beingExecutedOrder'
      },
      userToken: window.localStorage.getItem('token')
    }
  },
  computed: {
    ...mapGetters(['showNoticeModalStatus']),
  },
  created() {
    var now = new Date();
    var startTime = new Date(now.toLocaleDateString()).getTime() - 24 * 60 * 60 * 1000 * 6
    var endTime = new Date(now.toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
    this.$isClick(true);
    apiMerchantIndex({
      token: this.userToken,
      shopId: 1,
      startTime: Math.floor(startTime / 1000),
      endTime: Math.floor(endTime / 1000)
    }).then(res => {
      this.$isClick(false);
      // console.log(res);
      if (res.code == 1) {

        this.noticeList = res.msg.message_list
        this.open()
        var curYearDate = new Date().getFullYear()
        var curMonthDate = new Date().getMonth() + 1
        var curDayDate = new Date().getDate()
        var dayNum = this.getMonDay() - curDayDate //这个月还剩几天
        for (let i in this.noticeList) {
          var yearDate = new Date(this.noticeList[i].create_time).getFullYear()
          var monthDate = new Date(this.noticeList[i].create_time).getMonth() + 1
          var dayDate = new Date(this.noticeList[i].create_time).getDate()
          if (curYearDate - yearDate == 0) {
            if (curMonthDate - monthDate < 2) {
              //这个月
              if (curMonthDate - monthDate == 0) {
                if (curDayDate - dayDate <= 7) {
                  this.newNoticeList.push(this.noticeList[i])
                }
              } else {
                if (curMonthDate < monthDate) {
                  if (dayNum + dayDate <= 7) {
                    this.newNoticeList.push(this.noticeList[i])
                  }
                }
              }
            }
          }
        }
        if (this.newNoticeList.length > 0 && this.showNoticeModalStatus == 1) {
          this.isShowDialog = true
        } else {
          this.isShowDialog = false
        }
        setTimeout(() => {
          this.setUserConfig({
            showNoticeModal: 2
          })
        }, 10000)
        this.waitPushTaskNum.push(res.msg.wait_push_task_num)
      } else {
        this.$message.error(res.msg);
      }
    }).catch(res => {
      this.$isClick(false);
      // console.log(res);
      this.$message.error(res.msg)
    });


  },
  mounted() {
    this.drawTask();
  },
  methods: {
    ...mapActions(['setUserConfig']),
    // 初始化任务图表
    drawTask() {
      // 基于准备好的dom，初始化echarts实例
      let salesChart = this.$echarts.init(document.getElementById('taskSales'))
      let flowChart = this.$echarts.init(document.getElementById('taskFlow'))
      // 指定图表的配置项和数据
      let salesOption = {
        title: {
          text: '销量计划'
        },
        tooltip: {},
        legend: {
          data: ['销量计划数量']
        },
        xAxis: {
          name: '计划状态',
          data: ['等待执行', '已派单', '正在执行', '待审核', '评价待审核']
        },
        yAxis: {
          name: '销量任务数量'
        },
        series: [
          {
            type: 'bar',
            name: '销量计划数量',
            data: [
              this.waitPushTaskNum.wait_sale_num,
              this.waitPushTaskNum.wait_get_sale_num,
              this.waitPushTaskNum.wait_real_sale_num,
              this.waitPushTaskNum.wait_check_sale_num,
              this.waitPushTaskNum.wait_check_assess_num
            ]
          }
        ]
      };
      let flowOption = {
        title: {
          text: '流量计划',
        },
        tooltip: {},
        legend: {
          data: ['流量计划数量']
        },
        xAxis: {
          name: '计划状态',
          data: ['等待执行', '已派单', '正在执行', '待审核']
        },
        yAxis: {
          name: '流量任务数量'
        },
        series: [
          {
            type: 'bar',
            name: '流量计划数量',
            data: [
              this.waitPushTaskNum.wait_flow_num,
              this.waitPushTaskNum.wait_get_flow_num,
              this.waitPushTaskNum.wait_real_flow_num,
              this.waitPushTaskNum.wait_check_flow_num
            ],
            color: 'green'
          }
        ]
      };
      // 绘制图表
      salesChart.setOption(salesOption);
      salesChart.on('click', (params) => {
        // 控制台打印数据的名称
        switch (params.name) {
          case "等待执行":
            this.jumpTaskList(3)
            break
          case "已派单":
            this.jumpTaskList(4)
            break
          case "正在执行":
            this.jumpTaskList(5)
            break
          case "待审核":
            this.jumpTaskList(0)
            break
          case "评价待审核":
            this.jumpTaskList(2)
            break
        }
      });
      flowChart.setOption(flowOption);
      flowChart.on('click', (params) => {
        // 控制台打印数据的名称
        switch (params.name) {
          case "等待执行":
            this.jumpTaskList(6)
            break
          case "已派单":
            this.jumpTaskList(7)
            break
          case "正在执行":
            this.jumpTaskList(8)
            break
          case "待审核":
            this.jumpTaskList(1)
            break
        }
      });
      window.onresize = function () {
        salesChart.resize();
        flowChart.resize();
      };
    },
    getMonDay() {
      var d = new Date();
      //d.getMonth()+1月份索引从0开始,天数索引从1开始，第0天即代表最后一天
      var allDays = new Date(d.getFullYear(), (d.getMonth() + 1), 0).getDate();
      return allDays;
    },
    jumpTaskList(index) {
      this.$router.push(this.pageRouter[index])
    },
    toNoticeList() {
      this.$router.push('./notice')
    },
    toNoticeDetail(id) {
      this.$router.push("./noticeDetail?id=" + id)
    },
    open() {
      this.dialogTab = true
    },

  }
}
</script>
<style lang="less">
  #home {
    .page-card {
      background: #FFFFFF;
      margin-bottom: 16px;
      box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      .page-header {
        background: #ecf5ff;
        padding: 10px;
        display: flex;
        align-items: center;
        justify-content:space-between;
        .page-title {
          line-height: 20px;
          border-left: 3px solid #666666;
          padding-left: 10px;
          font-size: 16px;
          font-weight: 700;
          color: #333333;
          width: 200px;

          span {
            font-size: 12px;
            color: red;
          }
        }
        .more-btn {
          color: #666666;
          cursor: pointer;
        }
      }
      .page-content {
        padding: 10px 20px;
        .task {
          width: 100%;
          height: 500px;
        }
        .el-table thead tr, .el-table thead tr th{
        	background: #f5f7fa!important;

        }
        .el-table td, .el-table th {
        	padding: 9px 0 !important;
          text-align: center;
        }
        .list-cell {
          display: flex;
          align-items: center;
          justify-content:space-between;
          font-size: 14px;
          color: #333333;
          border-bottom: 1px dashed #e0e0e0;
          padding: 16px;
          cursor: pointer;
        }
      }
    }
    .display-notice {
      padding: 10px 0;
      border-bottom: 1px solid #e0e0e0;
    }
    .display-notice-time {
      display: inline-block;
      width: 150px;
      color: #666;
    }
    .display-notice-title {
      display: inline-block;
      color: #666;
    }
    .no-data-img {
      text-align: center;
      margin-top: 30px;
      margin-bottom: 30px;
      .tips{
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }


</style>
